<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Api } from '../../assets/api';
import type { ShoppingMallNav, DocsList } from '../../typings'
import SearchCommodity from '../../components/SearchComps/SearchCommodity.vue'
import LoadingComp from '../../components/LoadingComp/LoadingComp.vue';
const router = useRouter()
onMounted(() => {
    getNavList()
    getGuessList()
})
const time = ref(1000);
const navList = ref<Array<ShoppingMallNav>>()
const getNavList = async () => {
    let { data } = await Api.getShoppingMallNav()
    navList.value = data
    console.log(navList.value);

}

const guessLikeList = ref<Array<DocsList>>([])
const getGuessList = async () => {
    guessLikeList.value = []
    let { data } = await Api.getGuessLikeData()
    guessLikeList.value = data.data.wall.docs
    console.log(guessLikeList.value);


}

const goToSpDetail = (index: number) => {

    localStorage.currentCollection = JSON.stringify(guessLikeList.value[index])
    router.push({
        name: "productdetails",
        params: {
            id: guessLikeList.value[index].tradeItemId
        }
    })
}

</script>

<template>
    <div class="shopping-mall">

        <div class="title-list flex flex-wrap py-3 bg-white h-2/3">

            <div v-lazy:background-image="n.backgroundImage" class=" w-20 h-20 ml-3 relative z-0" v-for="n in navList"
                :key="n._system_record_entry_id"
                :style="{ backgroundImage: 'url(' + n.backgroundImage + ')', backgroundSize: '100% 100%' }">
                <div v-show="n.countdown" class=" absolute bottom-6 flex px-2">
                    <van-count-down :time="n.countdown * time">
                        <template #default="timeData">

                            <div class="  w-full flex justify-center">
                                <span class=" bg-black text-white p-0.5 text-xs">{{
                                    timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</span>
                                <span class="colon">:</span>
                                <span class=" bg-black text-white p-0.5 text-xs">{{
                                    timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class=" bg-black text-white p-0.5 text-xs">{{
                                    timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}</span>
                            </div>

                        </template>
                    </van-count-down>

                </div>
                <span class=" absolute bottom-0 w-full text-center text-white py-0.5 text-sm font-bold ">{{ n.title
                }}</span>
            </div>

            <van-skeleton v-show="!navList">
                <template #template>
                    <div class=" justify-between" :style="{ display: 'flex', width: '100%' }">
                        <van-skeleton-image />
                        <van-skeleton-image />
                        <van-skeleton-image />
                    </div>
                </template>
            </van-skeleton>

        </div>


        <div class="guess-like p-3 ">

            <div class=" text-center text-sm text-gray-400"> <i class=" px-0.5 rounded-full border-2 border-gray-400 mr-1">
                    <van-icon name="like" size="12" /></i> 猜你喜欢 </div>

            <div class="content-list h-14">

                <div class="flex w-full h-full flex-wrap justify-between px-2 pb-14 relative"
                    style=" min-height: 80vh; width: 100%;">
                    <div class=" w-40 mt-3" v-for="(item, i) in guessLikeList" :key="item.tradeItemId">
                        <SearchCommodity :list="item"></SearchCommodity>
                        <div @click="goToSpDetail(i)" class=" text-center py-0.5 bg-red-500 text-white">立即购买</div>
                    </div>

                    <div class="loading absolute left-1/2">
                        <LoadingComp :type="1" v-show="guessLikeList.length == 0"></LoadingComp>
                    </div>

                </div>

            </div>
        </div>

    </div>
</template>

<style lang="scss" scoped>
.shopping-mall {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #f6f6f6;
    overflow-y: auto;
    margin-top: 65px;


}
</style>